<template>
  <div >
    <button @click="isShow=!isShow">显示/隐藏</button>
    <transition name="sch" appear>
      <h3 v-show="isShow" class="demo2">{{msg}}</h3>
    </transition>
  </div>
</template>

<script>
export default {
  name:'Hello',
  data() {
    return {
      msg:'你好！！！',
      isShow:true
    }
  },
}
</script>

<style>
  .demo2 {
    background-color: #652;
    height: 90px;
  }

  /* 进入的起点 离开的终点*/
  .sch-enter, .sch-leave-to {
    transform:translateX(-100%)
  }
  /* 进入的终点 离开的起点*/
  .sch-enter-to, .sch-leav {
    transform:translateX(0px)
  }
  .sch-enter-active,.sch-leave-active{
    transition: 1s linear;
  }

</style>